<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2025-03-18 11:53:48
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-03-24 14:58:18
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\businessAnalysis\incomeStatistics\components\incomeType.vue
-->
<template>
  <div class="">
    <!-- 查询区 -->
    <searchCard @onSearch="searchFn" @onReset="resetFn">
      <el-form :inline="true" @keyup.enter="searchFn">
        <el-form-item label="类型名称：">
          <pb-input v-model="searchInfo.incomeCategoryName" placeholder="请输入类型名称"></pb-input>
        </el-form-item>
      </el-form>
    </searchCard>
    <div class="divide-css"></div>
    <!-- 表格区 -->
    <div class="flex-1">
      <pb-card padding="0" height="100%">
        <ContentOperation>
          <pb-button size="small" plain @click="onAddCategoryFN" v-hasPerm="'center:Analysis:lx-add'">新增</pb-button>
        </ContentOperation>
        <div class="main-box">
          <pb-table :column="tableColumn" :tableData="tableData" :bottomElement="['pb-page']">
            <template #opration="{ row }">
              <pb-button size="small" text @click="oneditCategoryFN(row)"
                v-hasPerm="'center:Analysis:lx-edit'">编辑</pb-button>
            </template>
          </pb-table>
          <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
            @onChange="getTableList" :total="pages.total"></pb-pagination>
        </div>
      </pb-card>
      <addcometypePop ref="refaddcometypePop" @refresh="getTableList" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getIncomeCategoryListApi } from '@/api/incomeStatistics'
import addcometypePop from './addcometypePop.vue';
const refaddcometypePop = ref(null as any)
const formOrigin = () => ({
  incomeCategoryName: ''
})
const onAddCategoryFN = () => {
  refaddcometypePop.value.show()
}
const oneditCategoryFN = (row) => {
  refaddcometypePop.value.show(row)
}
const searchInfo = ref(formOrigin())
const pageInit = () => ({
  currentPage: 1,
  pageSize: 15,
  total: 0,
});
const pages = ref(pageInit());
const tableColumn = reactive([
  {
    key: "incomeCategoryName",
    name: "类型名称",
  },
  {
    key: "creator",
    name: "创建人",
  },
  {
    key: "createTime",
    name: "创建时间",
  },
  {
    slot: "opration",
    name: "操作",
    // fixed: 'right',
    align: 'right'
  },
])
const tableData = ref([])

const searchFn = () => {
  getTableList()
}
const resetFn = () => {
  searchInfo.value = formOrigin()
  pages.value = pageInit()
  getTableList()
}

const getTableList = () => {
  getIncomeCategoryListApi({
    "currentPage": pages.value.currentPage,
    "pageSize": pages.value.pageSize,
    "incomeCategoryName": searchInfo.value.incomeCategoryName
  }).then(res => {
    if (res.code == 2000) {
      tableData.value = res.data.records
      pages.value.total = res.data.total

    }
  })
}
onMounted(() => {
  getTableList()
})
</script>

<style lang="scss" scoped></style>